<template>
  <view class="container" id="container">
    <view>
      <view class="home-header">
        <view class="header-left">
          <image :src="userInfo.avatarUrl" alt="头像"></image>
        </view>
        <view class="header-right">
          <h3>{{ userInfo.nickName }}</h3>
          <span>{{ userMap[userInfo.permit - 1] }}</span>
        </view>
        <view class="header-exchange">
          欢迎您!☺☺☺
        </view>
      </view>
      <view class="home-content">
        <view class="home-card">
          <van-row style="width: 100%;" :gutter="10">
            <van-col span="8">
              <view class="each-card category-card card-extra" @click="toPrimary">
                <image src="/static/imgs/home/add.png"></image>
                <text class="count-name">普通名片</text>
              </view>
            </van-col>
            <van-col span="8">
              <view class="each-card category-card card-extra" @click="toFiles">
                <image src="/static/imgs/home/data.png"></image>
                <text class="count-name">电子名片夹</text>
              </view>
            </van-col>
            <van-col span="8">
              <view class="each-card category-card card-extra" @click="toMessage">
                <image src="/static/imgs/home/turn.png"></image>
                <text class="count-name">信息发布</text>
              </view>
            </van-col>
            <van-col span="8">
              <view class="each-card category-card card-extra" @click="toCompany">
                <image src="/static/imgs/home/material.png"></image>
                <text class="count-name">单位门户</text>
              </view>
            </van-col>
          </van-row>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	const userMap = ['普通用户', '单位管理员', '超级管理员'];
import { mapState } from 'vuex';

	export default {
		data() {
			return {
				title: '这是首页',
				columns: ['男', '女'],
				home: '',
				userMap: ['普通用户', '单位管理员', '超级管理员'],
			}
		},
    computed: {
		  ...mapState({
        userInfo: state => state.user.userInfo
      })
    },
    mounted () {
    },
		onLoad() {
		},
		methods: {
      toPrimary () {
        uni.navigateTo({
          url: '/pages/user/user'
        })
      },
      toFiles () {
        uni.navigateTo({
          url: '/pages/files/files'
        })
      },
      showPop (e) {
        const index = e.currentTarget.dataset.index;

        if (index === '1'){
          this.$refs.popup.open()
        } else {
          this.$refs['popup-home'].open()
        }
      },
      toMessage () {
        uni.navigateTo({
          url: '/pages/messageList/messageList'
        })
      },
      toCompany () {
        uni.navigateTo({
          url: '/pages/company/companyList'
        })
      }
		}
	}
</script>

<style lang="less">
/**index.wxss**/
#container {
  background: #F4F4F8;
  min-height: 100vh;
  .each-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30upx;
    background: #ffffff;
    border-radius: 10%;
    margin: 10upx 0;
    image{
      flex: 1;
      width: 100upx;
      height: 100upx;
    }
    text{
      flex: 1;
      font-size: 30upx;
      margin-top: 20upx;
    }
  }
}
#container .home-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1rem 1rem 2.2rem 1rem;
  background: #0E9CED;
  color: #FFFFFF;
}
#container .home-header .van-button{
  width: auto !important;
  font-weight: normal;
}
#container .home-header .header-left image {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
}
#container .home-header .header-right {
  text-align: left;
  padding-left: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
#container .home-header .header-right h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
}
#container .home-header .header-right span {
  font-size: 0.7rem;
  margin-top: 0.3rem;
}
#container .header-exchange {
  flex: 1;
  text-align: right;
  font-size: 32rpx;
}
#container .header-exchange .van-button{
  background: transparent;
  color: #ffffff;
  border: none;
}
#container .home-content {
  padding: 200rpx 30upx;
  background: #F4F4F8;
  border-radius: 20px 20px 0 0;
  margin-top: -50upx;
}
#container .home-content .home-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
#container .home-content .van-button{
  margin: 50rpx 0;
}
#container .home-content button{
  width: 450rpx;
}

.usermotto {
  margin-top: 200px;
}
.to-home{
  margin-top: 40rpx;
}
.login-panel{
  display: flex;
  flex-direction: row;
  font-size: 15px;
  align-items: center;
  justify-content: center;
  margin-top: 200rpx;
}
.login-panel span{
  margin-left: 20rpx;
}
.overlay{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.task-empty{
  background: #ffffff;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.task-empty image{
  width: 320rpx;
  height: 320rpx;
}
.task-empty text{
  margin-top: 16px;
  padding: 0 60px;
  color: #969799;
  font-size: 14px;
  line-height: 20px;
}
</style>
